<template>
	<view>
		<video
			class="wt"
			id="myVideo"
			:src="src"
			:poster="filter.image(poster)"
			@error="videoErrorCallback"
			:danmu-list="danmuList"
			enable-danmu
			danmu-btn
			controls
		></video>
		<!-- #ifndef MP-ALIPAY -->
		<view class="f bg-white py4 fs16 br2">
			<u-input v-model:value="danmuValue" class="p2 wt" placeholder="在此处输入弹幕内容" /><text class="iconfont c9 px2">&#xe7f2;</text>
		</view>
		<!-- #endif -->
	</view>
</template>
<script>
import {mapState} from 'pinia'

export default {
	props: {
		src: {
			type: String,
			default: ''
		},
		poster: {
			type: String,
			default: ''
		}
	},
	onReady (res) {
		this.videoContext = uni.createVideoContext('myVideo')
	},
	data() {
		return {
			danmuList: [{
					text: '第 1s 出现的弹幕',
					color: '#ff0000',
					time: 1
				},
				{
					text: '第 3s 出现的弹幕',
					color: '#ff00ff',
					time: 3
				}
			],
			danmuValue: ''
		};
	},
	computed: mapState(['system']),
	created () {},
	methods: {
		sendDanmu () {
			this.videoContext.sendDanmu({
				text: this.danmuValue,
				color: this.getRandomColor()
			});
			this.danmuValue = ''
		},
		videoErrorCallback (e) {
			uni.showModal({
				content: e.target.errMsg,
				showCancel: false
			})
		},
		getRandomColor () {
			const rgb = []
			for (let i = 0; i < 3; ++i) {
				let color = Math.floor(Math.random() * 256).toString(16)
				color = color.length == 1 ? '0' + color : color
				rgb.push(color)
			}
			return '#' + rgb.join('')
		}
	}
};
</script>
<style lang="scss">
	
</style>
